<template>
  <header class="head">
    <div>
      <h2>社区管理系统--BBS</h2>
    </div>
    <div class="infos" v-if="userinfo">
      <!--解决异步数据判断问题-->
      <p>欢迎你：{{userinfo.username}}</p>
      <Avatar :userinfo="userinfo"/>
      <p>
        <el-tag effect="dark" type="success">{{userinfo.roleid | rolename}}</el-tag>
      </p>
      <p>
        <el-button @click="logout" type="danger" icon="el-icon-switch-button" circle></el-button>
      </p>
    </div>
  </header>
</template>
<script>
import Avatar from "./uploadavatar.vue"
export default {
  components:{
    Avatar
  },
    props:['userinfo'],

  data(){
   return{
    
   }
  },
  methods: {
   
    logout() {
      this.$confirm("你确定要退出登录吗, 是否继续?", "退出提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          sessionStorage.removeItem("roleid");//清除token
          sessionStorage.removeItem("token"); //token 判断是否登录的标记
          this.$router.push({ name: "login" });
        })
        .catch(() => {});
    },
  },
};
</script>
<style lang="scss" scoped>
.head {
  width: 100%;
  height: 60px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  h2 {
    color: #fff;
    font-size: 24px;
  }
  .infos {
    display: flex;
    align-items: center;
    p {
      margin: 0 6px;
      cursor: pointer;
    }
  }
}

</style>